<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 头部的标题区域 -->
      <div class="top">
        <el-button class="btn-back" type="primary" size="mini" icon="el-icon-arrow-left" @click="$router.back()">
          后退
        </el-button>
        <h3>员工批量导入</h3>
      </div>

      <!-- 中间的提示区域 -->
      <el-alert
        title="每次导入仅可添加1000名员工,姓名、手机、工号、入职日期、转正日期为必填项！"
        type="warning"
        show-icon
        :closable="false"
      ></el-alert>

      <!-- excel 的导入区域 -->
      <UploadExcel :on-success="getData"> </UploadExcel>
    </el-card>
  </div>
</template>

<script>
import UploadExcel from '@/components/UploadExcel'
import { addEmpBatchAPI } from '@/api/emp.js'
export default {
  name: 'ImportEmp',
  components: {
    UploadExcel
  },
  methods: {
    async getData(excelData) {
      // console.log(excelData)
      const formBody = excelData.results.map(item => {
        return {
          timeOfEntry: item.入职日期,
          username: item.姓名,
          workNumber: item.工号,
          mobile: item.手机号,
          correctionTime: item.转正日期
        }
      })
      // 调用接口
      await addEmpBatchAPI(formBody)
      this.$message.success('批量导入成功')
      // 跳转回员工页面
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  position: relative;
  .btn-back {
    position: absolute;
    top: -3px;
  }
  h3 {
    text-align: center;
  }
}
</style>
